<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation">新增</Button>
            <Table row-key="id" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt iuv-text-center">
                <Page :total="100" show-total />
            </div>
        </Card>
        <Modal v-model="modal" title="新增" @on-ok="handleSubmit" @on-cancel="handleDrawerCancel">
            <Form :model="formItem" :label-width="80">
                <FormItem label="名称" required>
                    <Input v-model="formItem.input" placeholder="请输入来源名称,批量新增用逗号分隔"></Input>
                </FormItem>
                <FormItem label="排序">
                    <Input v-model="formItem.number" type="number" placeholder="默认在现在排序后+1"></Input>
                </FormItem>
                <FormItem label="父节点">
                    <Select v-model="formItem.select">
                        <Option value="微信">微信</Option>
                        <Option value="抖音">抖音</Option>
                        <Option value="门户">门户</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                modal: false,
                formItem: {
                    input: '',
                    select: '',
                    number: ''
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name',
                        tree: true
                    },
                    {
                        title: '排序',
                        key: 'sort'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        id: '100',
                        name: '肩部',
                        sort: 1,
                        status: '1'
                    },
                    {
                        id: '101',
                        name: '头部',
                        sort: 2,
                        status: '0',
                        children: [
                            {
                                id: '10100',
                                name: '眼部',
                                sort: 1,
                                status: '1'
                            },
                            {
                                id: '10101',
                                name: '耳部',
                                sort: 2,
                                status: '1'
                            },
                            {
                                id: '10102',
                                name: '脸部',
                                sort: 3,
                                status: '0'
                            }
                        ]
                    },
                    {
                        id: '200',
                        name: '躯干',
                        sort: 3,
                        status: '1'
                    },
                    {
                        id: '300',
                        name: '脚部',
                        sort: 4,
                        status: '1'
                    }
                ]
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
            },
            handleSubmit () {
                this.$Message.success('操作成功!');
            }
        }
    }
</script>
